ClassyGradient is a jQuery plugin written by Marius Stanciu - Sergiu, a plugin that allows you to add gradient generators in your web apps and sites. Smart and fully cutomizable, it is suitable for any type of use : CSS generators, HTML5 canvas applications, live usage.
Unlimited gradient points.
HTML5 Browsers compatible (IE9 +).
Generate CSS code.
Customizable by CSS.
Can easily be combined with HTML5 canvas.
No server files, only Javascript & CSS.
Instructions
First you need to include the jQuery library, the jQuery UI library and the ColorPicker plugin, since ClassyGradient is a plugin that depends on those. You can download jQuery from the jQuery website or link it directly from the Google CDN.
Next, you create the element that you want to trigger the gradient on.
<div class="gradient1"/><div>
As the last step, you trigger the ClassyGradient() function on the element you just created. For example, we trigger the function on the div with the class gradient1.
$('.gradient1').ClassyGradient();
Options
gradient - default gradient points.
width - gradient preview width.
height - gradient preview height.
point - gradient point size.
target - gradient destination.
orientation - gradient orientation, can be horizontal or vertical.
tooltip - tooltip background gradient points
onChange - event fired on gradient changes.
onInit - event fired on initialization.
getArray - return the gradient points as an array.
getCss - return the full gradient generated CSS code.
getString - return the gradient points as a string.
setOrientation - change gradient orientation.
update - trigger this method if you're updating parameters after plugin init.